

{extend name="../application/index/view/index/base.html" /}

{block name="main-content"}
<div class="breadcrumbs" id="breadcrumbs">
    <script type="text/javascript">
        try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
    </script>

    <ul class="breadcrumb">
        <li>
            <i class="icon-home home-icon"></i>
            <a href="#">房间管理</a>
        </li>
        <li class="active">添加房间</li>
    </ul><!-- .breadcrumb -->
    <div class="nav-search" id="nav-search">
        <form class="form-search">
									<span class="input-icon">
										<input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off" />
										<i class="icon-search nav-search-icon"></i>
									</span>
        </form>
    </div><!-- #nav-search -->
</div>
<div class="page-content" style="margin-top: 20px">
    <div class="row" >
        <div class="col-xs-12">
            <form class="form-horizontal" role="form">
                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right" for="username"> 选择房东: </label>

                    <div class="col-sm-9">
                        <input type="text" id="username" placeholder="--房东必填--" class="col-xs-10 col-sm-5"  data-toggle="modal" data-target="#add_admin"/>
                        <span style="color: red;margin-left: 10px">*</span>
                    </div>
                </div>

                <div class="space-4"></div>

                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right" for="roomCode"> 房间号: </label>

                    <div class="col-sm-9">
                        <input type="text" placeholder="--房间号必填，只能为数字--" id="roomCode" class="col-xs-10 col-sm-5" />
                        <span style="color: red;margin-left: 10px">*</span>
                    </div>
                </div>

                <div class="space-4"></div>

                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right" for="address"> 住房地址: </label>

                    <div class="col-sm-9">
                        <input type="text" placeholder="--住房地址必填，只能为汉字--" id="address" class="col-xs-10 col-sm-5" />
                        <span style="color: red;margin-left: 10px">*</span>
                    </div>
                </div>

                <div class="space-4"></div>

                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right" for="roomNum"> 可入住房间数: </label>

                    <div class="col-sm-9">
                        <input type="text" placeholder="--可入住房间数必填，只能为数字--" id="roomNum" class="col-xs-10 col-sm-5" />
                        <span style="color: red;margin-left: 10px">*</span>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right" for="province"> 所在省份: </label>

                    <div class="col-sm-9">
                        <select id="province" class="col-xs-10 col-sm-5"></select>
                        <span style="color: red;margin-left: 10px">*</span>
                        <div class="space-2"></div>

                        <div class="help-block" id="input-span-slider"></div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right"> 所在城市: </label>

                    <div class="col-sm-9">
                        <select id="city" class="col-xs-10 col-sm-5"></select>
                        <span style="color: red;margin-left: 10px">*</span>
                    </div>
                </div>

                <div class="space-4"></div>

                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right" for="region"> 所在区/县: </label>

                    <div class="col-sm-9">
                        <select id="region" class="col-xs-10 col-sm-5"></select>
                        <span style="color: red;margin-left: 10px">*</span>
                    </div>
                </div>

                <div class="space-4"></div>

                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right" for="police_station"> 所在分局: </label>

                    <div class="col-sm-9">
                        <select id="police_station" class="col-xs-10 col-sm-5"></select>
                        <span style="color: red;margin-left: 10px">*</span>
                    </div>
                </div>
                <div class="space-4"></div>

                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right" for="detail"> 房型描述: </label>

                    <div class="col-sm-9">
                        <textarea  placeholder="--房型描述非必填--"
                                   id="detail" class="col-xs-10 col-sm-5"
                                   style="height: 100px;width: 270px;resize:none;"></textarea>
                    </div>
                </div>

                <div class="clearfix form-actions">
                    <div class="col-md-offset-3 col-md-9">
                        <button class="btn btn-info" type="button" id="addBtn">
                            <i class="icon-ok bigger-110"></i>
                            确定
                        </button>

                        &nbsp; &nbsp; &nbsp;
                        <button class="btn" type="reset" id="clearMsg">
                            <i class="icon-undo bigger-110"></i>
                            重置
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- /Page Container -->
<!-- Main Container -->
<div class="modal fade" id="add_admin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog ui-widget-content">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title">
                    选择房东
                </h4>
            </div>
            <div class="modal-body">
                <div class="input-group" style="margin-top: -8px">
                    <input id="query" type="text" class="form-control search-query" style="width: 270px;float: right" placeholder="--请输入您的用户名/手机号进行查询--">
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-info btn-sm" id="search">
                            搜索
                            <i class="icon-search icon-on-right bigger-110"></i>
                        </button>
                    </span>
                </div>
                <table class="table table-striped table-hover table-bordered" id="admin" style="margin-top:12px;text-align: center;">
                    <thead>
                    <tr role="row" class="tr">
                        <th>
                            用户名
                        </th>
                        <th>
                            昵称
                        </th>
                        <th>
                            手机号码
                        </th>
                        <th>
                            性别
                        </th>
                        <th>
                            操作
                        </th>
                    </tr>
                    </thead>
                    <tbody class="admin_tr">

                    </tbody>
                </table>
                <div style="margin-top: -10px" id="pagination_div"></div>
            </div>
            <div class="modal-footer" style="margin-top: 15px">
                <button type="button" class="btn btn-default" data-dismiss="modal" id="false">取消
                </button>
                <button type="button" class="btn btn-primary" id="confirm">
                    确定
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<script id="tpl-user" type="text/html">
    <% if(user.length>0){ %>
        <% for(var i in user) {%>
        <tr class="tr">
            <td class="account"><%= user[i]["account"] %></td>
            <td class="nick_name"><%= user[i].nick_name %></td>
            <td class="phone"><%=user[i].phone%></td>
            <td class="sex"><%=user[i].sex%></td>
            <td>
                <input name="checkRadio" type="radio" class="ace">
                <span class="lbl">选择 √ </span>
            </td>
        </tr>;
        <% } %>
    <% }else{ %>
    <tr class="tr" >
        <td colspan="6">暂无数据！</td>
    </tr>
    <% } %>
</script>

<script id="tpl-province" type="text/html">
    <option style="display:none">--请选择所在省份--</option>
    <% for(var i in province) {%>
    <option class="province" value="<%= province[i]['province']%>"><%= province[i]["province"]%></option>
    <% }%>
</script>
<script id="tpl-city" type="text/html">
    <option style="display:none">--请选择所在城市--</option>
    <% for(var i in city) {%>
    <option class="city" value="<%= city[i]['city']%>"><%= city[i]["city"]%></option>
    <% }%>
</script>
<script id="tpl-region" type="text/html">
    <option style="display:none">--请选择所在区/县--</option>
    <% for(var i in region) {%>
    <option class="region" value="<%= region[i]['region']%>"><%= region[i]["region"]%></option>
    <% }%>

</script>
<script id="tpl-police" type="text/html">
    <option style="display:none">--请选择所在分局/派出所--</option>
    <% for(var i in police) {%>
    <option class="police" value="<%= police[i]['id']%>"><%= police[i]["policeStation"]%></option>
    <% }%>

</script>

<script>
    $(function () {
        var limit = 8;
        var isNew = true;

        //分页
        function initPagination(total) {
            var options = {
                currentPage: 1,
                totalPages: total,
                onPageClicked: function (e, originalEvent, type, page) {
                    refresh(page);
                }
            };
            $('#pagination_div').bootstrapPaginator(options);
        }

        function getPageLimit() {
            $.get('/index.php/index/Room/getTypePageLimit',{
                input_query: $('#query').val()
            },function (data) {
                if (data.code == 200) {
                    var count = data.data;
                    var pageSum = Math.ceil(count / limit) == 0 ? 1 : Math.ceil(count / limit);
                    initPagination(pageSum);
                } else {
                    initPagination(1);
                }
            });
        }

        function getSearchPageLimit() {
            $.get('/index.php/index/Room/getSearchPageLimit', {
                input_query: $('#query').val()
            },function (data) {
                if (data.code == 200) {
                    var count = data.data;
                    var pageSum = Math.ceil(count / limit) == 0 ? 1 : Math.ceil(count / limit);
                    initPagination(pageSum);
                } else {
                    initPagination(1);
                }
            });
        }

        function refresh(page) {
            var param = {
                page: page,
                limit: limit,
                input_query: $('#query').val(),
            };
            $.get('/index.php/index/Room/room_query',param,
                function (data) {
                    var space = $("#admin").find('.admin_tr');
                    space.empty();
                    var data = data.data;
                    if(data){
                        for(var i = 0;i<data.length;i++){
                            if(data[i].sex==1){
                                data[i].sex='男'
                            }else{
                                data[i].sex='女'
                            }

                            if(data[i].type==1){
                                data[i].type='房东'
                            }
                        }
                    }
                    var html = template('tpl-user', {
                        user: data
                    });
                    $(".admin_tr").append(html);
                });
            initPagination();
        }

        //获取所在省份
        if (isNew == true){
            $.post('/index.php/index/Room/query',{
                isNew:isNew
            }, function ($data) {
                if ($data['code'] == 200) {
                    var data =$data.data;
                    var html = template('tpl-province', {
                        province: data,
                    });
                    $("#province").append(html);
                } else {
                    return;
                }
            });
        }

        //获取所在城市
        function getCity(province){
            $("#city").empty();
            $.post('/index.php/index/Room/query',
                {
                    province:province
                }, function ($data) {
                    if ($data['code'] == 200) {
                        var data =$data.data;
                        var html = template('tpl-city', {
                            city: data,
                        });
                        $("#city").append(html);
                    } else {
                        return;
                    }
                });
        }

        //获取所在区县
        function getRegion(city){
            $("#region").empty();
            $.post('/index.php/index/Room/query',
                {
                    city:city
                }, function ($data) {
                    if ($data['code'] == 200) {
                        var data =$data.data;
                        var html = template('tpl-region', {
                            region: data,
                        });
                        $("#region").append(html);
                    } else {
                        return;
                    }
                });
        }

        //获取所在派出所
        function getPoliceStation(region){
            $("#police_station").empty();
            $.post('/index.php/index/Room/query',
                {
                    region:region
                }, function ($data) {
                    if ($data['code'] == 200) {
                        var data =$data.data;
                        var html = template('tpl-police', {
                            police: data,
                        });
                        $("#police_station").append(html);
                    } else {
                        return;
                    }
                });
        }

        //所在省份联动
        $('#province').change(function(){

            var checkIndex=$(this).get(0).selectedIndex;
            var province = $(this).children().eq(checkIndex).val();
            getCity(province);
        });

        //所在城市
        $('#city').change(function(){

            var checkIndex=$(this).get(0).selectedIndex;
            var city = $(this).children().eq(checkIndex).val();
            getRegion(city);
        });

        //所在区县
        $('#region').change(function(){
            var checkIndex=$(this).get(0).selectedIndex;
            var region = $(this).children().eq(checkIndex).val();
            getPoliceStation(region);
        });

        //获取url传递的参数
        function GetRequest() {
            var url = window.location.search;
            var theRequest = new Object();
            if (url.indexOf("?") != -1) {
                var str = url.substr(1);
                strs = str.split("&");
                for (var i = 0; i < strs.length; i++) {
                    theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                }
            }
            return theRequest;
        }
        Request = GetRequest();
        $("#username").val(Request.account);

        //添加房间信息
        $("#addBtn").click(function () {
            isNew = true;
            var room_code = $("#roomCode").val();
            var room_address = $("#address").val();
            var room_num = $("#roomNum").val();
            var police_station_id = $("#police_station").val();

            $.post("/index.php/index/Room/save",{
                account:$("#username").val(),
                room_code:$("#roomCode").val(),
                room_address:$("#address").val(),
                room_detail:$("#detail").val(),
                room_num:$("#roomNum").val(),
                police_station_id:$("#police_station").val(),
            },function (data) {
                if(!room_code || !room_address || !room_num || !police_station_id){
                    layer.msg("输入内容不能为空，请重新填写！");
                    return;
                }else if (data.code == 600){
                    layer.msg(data.msg)
                }else{
                    layer.msg("添加成功");
                    refresh();

                }
            })
        });

        $("#confirm").click(function () {
            var radioVal= $('input[name="checkRadio"]:checked').val();
            if(radioVal == null){
                layer.msg("请选择一个!");
                return false;
            }
            else{
                var radioBtn = $('input[name="checkRadio"]:checked').parent().parent();
                var x = radioBtn.find('.account').html();
                $("#username").val(x);
            }
            $("#add_admin").modal('hide');
        });

        $("#search").click(function () {
            refresh(1);
            getSearchPageLimit();
        });

        refresh(1);
        getPageLimit();

    })
</script>
{/block}

